// -----------------------------
// --- StoryObject ---
// -----------------------------
function StoryObject(id, offsetLeft, offsetTop, height, width, imageName) {
	this.id = id;
	this.offsetLeft = offsetLeft;
	this.offsetTop = offsetTop;
	this.height = height;
	this.width = width;
	this.imageName = imageName;
}
StoryObject.prototype.getId = function() {
	return this.id;
};
StoryObject.prototype.getOffsetLeft = function() {
	return this.offsetLeft;
};
StoryObject.prototype.getOffsetTop = function() {
	return this.offsetTop;
};
StoryObject.prototype.getHeight = function() {
	return this.height;
};
StoryObject.prototype.getWidth = function() {
	return this.width;
};
StoryObject.prototype.getImageName = function() {
	if (this.imageName == null)
		return '';
	return this.imageName;
};
StoryObject.prototype.setOffsetLeft = function(offsetLeft) {
	this.offsetLeft = offsetLeft;
};
StoryObject.prototype.setOffsetTop = function(offsetTop) {
	this.offsetTop = offsetTop;
};
StoryObject.prototype.setHeight = function(height) {
	this.height = height;
};
StoryObject.prototype.setWidth = function(width) {
	this.width = width;
};
StoryObject.prototype.setImageName = function(imageName) {
	this.imageName = imageName;
};

// -----------------------------
// --- Story ---
// -----------------------------
function Story(id) {
	this.id = id;
	this.storyObjectUniqueId = 0;
	this.storyObjects = [];
}
Story.prototype.getId = function() {
	return this.id;
};
Story.prototype.addStoryObject = function(id, offsetLeft, offsetTop, height, width, imageName) {
	if (id == null) {
		this.storyObjectUniqueId++;
		id = this.storyObjectUniqueId;
	}
	this.storyObjects[id] = new StoryObject(id, offsetLeft, offsetTop, height, width, imageName);
	return this.storyObjectUniqueId;
};
Story.prototype.removeStoryObject = function(storyObjectId) {
	this.storyObjects[storyObjectId] = null;
};
Story.prototype.getStoryObject = function(storyObjectId) {
	return this.storyObjects[storyObjectId];
};
Story.prototype.getStoryObjects = function() {
	return this.storyObjects;
};
Story.prototype.clearStoryObjects = function() {
	this.storyObjectUniqueId = 0;
	this.storyObjects = [];
};

// -----------------------------
// --- StoryObjectController ---
// -----------------------------
function StoryObjectController(storyObject, storyController) {
	this.storyObject = storyObject;
	this.storyController = storyController;
}
StoryObjectController.prototype.getHtml = function() {
	var divStyle = 'position:absolute;';
	divStyle += 'top:' + this.storyObject.getOffsetTop() + 'px;';
	divStyle += 'left:' + this.storyObject.getOffsetLeft() + 'px;';
	divStyle += 'height:' + this.storyObject.getHeight() + 'px;';
	divStyle += 'width:' + this.storyObject.getWidth() + 'px;';
	divStyle += 'background-image:url(../resources/images/' + this.storyObject.getImageName() + ');';
	var divStyleImage = '';
	// divStyleImage += 'background-image:url(../resources/images/' +
	// this.storyObject.getImageName() + ');';
	var tagPositionInfo = '<div class="soTitle">' + 'Object ' + this.storyObject.getId() + ': (' + this.storyObject.getOffsetTop() + ',' + this.storyObject.getOffsetLeft() + ',' + this.storyObject.getHeight() + ',' + this.storyObject.getWidth() + ')' + '</div>';
	var tagUploadButton = '<a href="#" title="Upload Image" id="button' + this.storyObject.getId() + '" class="soUploadImage">Upload Image</a>';
	var tagUploadText = '<p class="soUploadText">' + this.storyObject.getImageName() + '</p>';
	var tagDeleteButton = '<a href="#" title="Close" class="soDelete">Close</a>';
	return '<div id="' + this.storyObject.getId() + '" class="so ui-widget-content ui-draggable ui-resizable" style="' + divStyle + '">' + tagPositionInfo + tagUploadButton + tagUploadText + tagDeleteButton + '</div>';
};
StoryObjectController.prototype.getAjaxUploader = function() {
	new AjaxUpload(this, '#button' + this.storyObject.getId(), {
		// action: 'upload.php',
		action : 'http://localhost:8080/mestory/upload', // I disabled
		// uploads in this
		// example for
		// security reasons
		data : {
			'key1' : "This data won't",
			'key2' : "be send because",
			'key3' : "we will overwrite it"
		},
		onSubmit : function(file, ext) {
			// if (ext && new RegExp('^(' + allowed.join('|') +
			// ')$').test(ext)){
			if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)) {
				/* Setting data */
				this.setData({
					'key' : 'This string will be send with the file'
				});

				this.getReference().storyObject.setImageName('Uploading ' + file);
			} else {

				// extension is not allowed
				this.getReference().storyObject.setImageName('Error: only images are allowed');
				// cancel upload
				return false;
			}

		},
		onComplete : function(file) {
			this.getReference().storyObject.setImageName(file);
			$('#' + this.getReference().storyObject.getId() + ' .uploadText').text(file);
			this.getReference().storyController.refresh();
		}
	});
};
// -----------------------------
// --- StoryController ---
// -----------------------------
function StoryController(story) {
	this.story = story;
	this.storyObjectControllers = [];
	this.initStoryObjectControllers();
}
StoryController.prototype.initStoryObjectControllers = function() {
	var socs = [];
	var sc = this;
	if (this.story.getStoryObjects() != null) {
		$.each(this.story.getStoryObjects(), function(i, v) {
			if (v != null) {
				socs.push(new StoryObjectController(v, sc));
			}
		});
	}
	this.storyObjectControllers = socs;
};
StoryController.prototype.draggable = function() {
	var sc = this;
	$("#set .ui-draggable").draggable({
		stop : function(event, ui) {
			sc.story.getStoryObject($(this).attr('id')).setOffsetLeft(parseInt(ui.offset.left));
			sc.story.getStoryObject($(this).attr('id')).setOffsetTop(parseInt(ui.offset.top));
			sc.refresh();
		}
	});
};
StoryController.prototype.resizable = function() {
	var sc = this;
	$("#set .ui-resizable").resizable({
		minWidth : 55,
		minHeight : 55,
		stop : function(event, ui) {
			sc.story.getStoryObject($(this).attr('id')).setHeight(parseInt(ui.size.height));
			sc.story.getStoryObject($(this).attr('id')).setWidth(parseInt(ui.size.width));
			sc.refresh();
		}
	});
};
StoryController.prototype.setStory = function(story) {
	this.story = story;
	this.initStoryObjectControllers();
};

StoryController.prototype.getHtml = function() {
	var html = '';
	$.each(this.storyObjectControllers, function(i, v) {
		if (v != null) {
			html += v.getHtml();
		}
	});
	return html;
};
StoryController.prototype.getAjaxUploader = function() {
	$.each(this.storyObjectControllers, function(i, v) {
		if (v != null) {
			v.getAjaxUploader();
		}
	});
};

StoryController.prototype.getXml = function() {
	var rootXml = $('<XMLDocument />');
	rootXml.append($('<story />'));
	// get a reference to story
	var storyXml = rootXml.find('story');
	storyXml[0].setAttribute("sid",this.story.getId());
	$.each(this.story.getStoryObjects(), function(i, v) {
		if (v != null) {
			var objectXml = $('<storyobjects />');
			objectXml.append($('<soid />').text(parseInt(v.getId())));
			objectXml.append($('<left />').text(parseInt(v.getOffsetLeft())));
			objectXml.append($('<top />').text(parseInt(v.getOffsetTop())));
			objectXml.append($('<height />').text(parseInt(v.getHeight())));
			objectXml.append($('<width />').text(parseInt(v.getWidth())));
			objectXml.append($('<imageName />').text(v.getImageName()));
			storyXml.append(objectXml);
		}
	});
	return rootXml;
};

StoryController.prototype.refresh = function() {
	$("#set").empty();
	$("#set").html(this.getHtml());
	this.getAjaxUploader();
	this.resizable();
	this.draggable();
	var sc = this;
	$(".soDelete").dblclick(function() {
		sc.story.removeStoryObject($(this).parent().attr('id'));
		sc.setStory(sc.story);
		$(this).parent().remove();
	});
};
